<template>
  <div class="container">
    <div v-for="video in videoList" :key="video.videoId">
      <el-row>
        <el-col :span="4">
          <div class="left">
            <a target="_blank" href="//www.bilibili.com/video/BV1HV4y1U7ji/" class="cover-wrp">
              <img
                :src="urlPrefix+video.videoCover"
                :alt="video.videoTitle"
                class="cover-img"
                style="width:100%"
              />
              <div class="duration">{{video.druation}}</div>
            </a>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="right">
            <ul>
              <li>
                <div class="meta-title">
                  <a
                    target="_blank"
                    href="//www.bilibili.com/video/BV1HV4y1U7ji/"
                    class="video-title"
                  >{{video.videoTitle}}</a>
                </div>
               
              </li>
              <li style="font-size: 14px;padding-top:12px">
                <el-row :gutter="20">
                  <el-col :span="14">
                    <div>
                      <span class="date">{{video.createTime.replace(/T/g, " ").replace(/.[\d]{3}Z/)}}</span>
                    </div>
                  </el-col>

                  <el-col :span="6" style="float:right">
                    <div>
                      <el-button size="mini" type="primary" plain>
                        <i class="el-icon-edit"></i>编辑
                      </el-button>
                      <el-button size="mini" type="primary" plain>
                        <i class="el-icon-s-data"></i> 数据
                      </el-button>
                      <el-button @click="deleteVideo(video.videoId)" size="mini">
                        <i class="el-icon-delete-solid"></i>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </li>
              <li>
                <div>
                  <ul class="data-icon">
                    <li>
                      <div title="播放" class="view-stat">
                        <img
                          width="16px"
                          height="16px"
                          src="https://s1.hdslb.com/bfs/templar/york-static/qAnTDC0DSpuds9Rv.png"
                        />
                        <span class="icon-text">{{video.videoPlayTimes}}</span>
                      </div>
                    </li>
                    <li>
                      <div title="点赞" class="view-stat">
                        <img
                          width="16px"
                          height="16px"
                          src="https://s1.hdslb.com/bfs/templar/york-static/wOdLWtIVZ2XE9vNZ.png"
                        />
                        <span class="icon-text">{{video.videoLike}}</span>
                      </div>
                    </li>

                    <li>
                      <div title="评论" class="view-stat">
                        <img
                          width="16px"
                          height="16px"
                          src="https://s1.hdslb.com/bfs/templar/york-static/IuXtxcG3v5O8to0K.png"
                        />
                        <span class="icon-text">{{video.videoComments}}</span>
                      </div>
                    </li>
                   
                    <li>
                      <div title="收藏" class="view-stat">
                        <img
                          width="16px"
                          height="16px"
                          src="https://s1.hdslb.com/bfs/templar/york-static/RPCS9YBWZUQgypok.png"
                        />
                        <span class="icon-text">0</span>
                      </div>
                    </li>
                    <li>
                      <div title="分享" class="view-stat">
                        <img
                          width="16px"
                          height="16px"
                          src="https://s1.hdslb.com/bfs/templar/york-static/929bYp7TSIAecSPG.png"
                        />
                        <span class="icon-text">{{video.videoForward}}</span>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
export default {
  name: "uploadmanagevideo",
  data() {
    return {
      currentPage: 1,
      pageSize: 15,
      videoList: "",
      urlPrefix: "http://"
    };
  },
  created() {
    this.getCurrentUserVideo();
  },
  methods: {
    deleteVideo(id) {
      this.axios({
        method: "get",
        params: {
          id: id
        },
        url: "http://localhost:8094/video/deleteVideo"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          res.data;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },
    getCurrentUserVideo() {
      this.axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          location: "simple",
          partId:'',
        },
        url: "http://localhost:8094/video/getPageVideo"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.videoList = res.data.records;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
.container {
  align-content: center;
  padding: 10px;
}
.data-icon li {
  align-content: center;
  padding: 12px;
  color: blue;
  float: left;
}
.video-title {
  font-size: 19px;
}
.left {
  width: 80%;
  height: 110px;
  
}
</style>




